<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-12 13:14:26
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-21 09:57:53
-->
<template>
    <div id="login">
        <div class="title">数据分析大屏</div>
        <p>沃得智云物联</p>
        <van-form @submit="onSubmit">
            <van-field
                error
                left-icon="user"
                v-model="form.username"
                placeholder="请输入用户名"
                :rules="[{ required: true, message: '请输入用户名' }]"
            />
            <van-field
                style="margin-top: 10px"
                left-icon="pass"
                error
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请输入密码' }]"
            />
            <div class="filed2">
                <van-button round block type="danger" native-type="submit" class="font18"> 登 录 </van-button>
            </div>
            <div class="remember">
                <van-checkbox v-model="checked" shape="square" icon-size="18px" checked-color="#C50307" @change="change">记住登录状态</van-checkbox>
            </div>
        </van-form>
        <div class="bottom">
            <img src="../assets/wodelogo.png" alt="" class="logo" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, ref, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { User } from '@/http';
export default defineComponent({
    name: 'Login',
    components: {},
    props: {},
    setup() {
        const router = useRouter();
        const state = reactive({
            form: {
                username: 'dxl',
                password: '111111',
                platform: 'h5',
            },
            checked: false,
        });
        onMounted(() => {
            const checked = localStorage.getItem('checked');
            if (checked == 'true') {
                const userinfo = localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo') as string) : '';
                getPermission(userinfo);
            }
        });
        const onSubmit = () => {
            User.Login(state.form).then((res) => {
                localStorage.setItem('userinfo', JSON.stringify(res));
                localStorage.setItem('checked', JSON.stringify(state.checked));
                getPermission(res);
            });
        };
        function getPermission(res) {
            const permission = res.permissions ? res.permissions.split(',') : [];
            if (permission.length > 0) {
                if (permission.indexOf('xssjjk2') != -1) {
                    router.push(`/bigScreen?name=xiaoshou`);
                } else if (permission.indexOf('fhsjjk2') != -1) {
                    router.push(`/bigScreen?name=fahuo`);
                } else if (permission.indexOf('cwsjjk2') != -1) {
                    router.push(`/bigScreen?name=zonghe`);
                } else {
                    router.push(`/bigScreen?name=`);
                }
            } else {
                router.push(`/bigScreen?name=`);
            }
        }
        function change(v) {
            state.checked = v;
            // localStorage.setItem('checked', v);
        }
        return {
            ...toRefs(state),
            onSubmit,
            change,
        };
    },
});
</script>

<style lang="scss" scoped>
#login {
    width: 100%;
    height: 100vh;
    padding: 0 5%;
    position: absolute;
    background: url('../assets/login.png') no-repeat;
    background-size: 100% 100%;
    .title {
        font-family: PingFangSC-Semibold;
        font-size: 36px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 55px;
        margin-top: 15%;
        margin-left: 5%;
    }
    p {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 30px;
        margin-bottom: 8%;
        margin-left: 5%;
    }

    .bottom {
        width: 90%;
        position: absolute;
        bottom: 30px;
        text-align: center;
        .logo {
            width: 92px;
            height: 20px;
        }
    }
    .remember {
        width: 90%;
        display: flex;
        justify-content: center;
    }
    .filed2 {
        margin: 35px;
    }

    .dialog-title {
        height: 45px !important;
        padding: 15px 0;
    }
}
</style>
